<template>
	<view class="container">
		<u-sticky>
			<view class="search">
				<u-search placeholder="搜索线路" :showAction="false" height="68rpx" :actionStyle="actionStyle"
					searchIconSize="42" v-model="keyword" @change="search()" @search="search()"></u-search>
				<image src="../../static/img/sort.png" mode=""></image>
			</view>
		</u-sticky>
		<view class="body">
			<!-- <scroll-view scroll-y="true" class="scrolly" @scrolltolower="reach"> -->
			<view class="body_car" @click="golook(line.id)" v-for="(line,index) in line_list" :key="index">
				<view style="font-size: 34rpx; font-weight: 600;">路线：
					<text v-for="(item,indexs) in line.line_child" class="linetxt"
						:key="indexs">{{item.outlet_name}}</text>
				</view>
				<view class="car_center">
					<text>档口：{{line.muzzle.name?line.muzzle.name:'暂无档口'}}</text>
					<text>需求车辆：{{line.demand_nums}}</text>
				</view>
				<view class="car_btn">
					<text>空闲车辆：{{line.idle_nums}}</text>
					<view class="btnin"
						@click.stop="share(line.id,line.muzzle_id,line.muzzle.name,line.start_outlet_id,line.start_name,line.end_outlet_id,line.end_name)">
						<button>分享</button>
					</view>
				</view>

			</view>
			<view class="none" v-if="line_list==''">
				<image src="../../static/img/none.png" mode=""></image>
				<text>暂无线路信息</text>
			</view>
			<!-- </scroll-view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				actionStyle: {
					color: "#fff"
				},
				list: '',
				line_list: '',
				page: 1,
				cardata: {
					start_outlet_id: '',
					start_name: '',
					end_outlet_id: '',
					end_name: '',
					muzzle_name: '',
					line_id: ''
				}
			}
		},
		onLoad() {
			this.page = 1
		},
		onReachBottom() {
			this.page++
			this.getlist()
		},
		onShow() {
			this.line_list = ''
			this.page = 1
			this.getlist()
		},
		methods: {
			//触底刷新
			reach() {
				this.page++
				this.getlist()
			},
			search() {
				this.line_list = ''
				this.getlist()
			},
			//线路列表
			getlist() {
				this.$linelist({
					page: this.page,
					line_name: this.keyword
				}).then(res => {
					this.list = res.data
					this.line_list = [...this.line_list, ...res.data.data]
					if (res.code != 1) {
						this.$toast(res.msg)
					}
				})
			},

			//分享
			share(lineid, mid, muzzle_name, start_outlet_id, start_name, end_outlet_id, end_name) {
				this.cardata = {
					start_outlet_id: start_outlet_id,
					start_name: start_name,
					end_outlet_id: end_outlet_id,
					end_name: end_name,
					mid: mid,
					muzzle_name: muzzle_name,
					line_id: lineid
				}
				uni.navigateTo({ url: "/pages/share/share?cardata=" + JSON.stringify(this.cardata) })
			},

			//查看车辆
			golook(id) {
				uni.navigateTo({ url: "/pages/lookcar/lookcar?lineid=" + id })
			}
		}
	}
</script>

<style lang="scss">
	.container {

		.search {
			border-top: #f9f9f9 1px solid;
			padding: 20rpx;
			display: flex;
			align-items: center;
			// width: 100vw;
			height: 60rpx;
			background: #1890FF;
			display: flex;

			image {
				width: 36rpx;
				height: 44rpx;
				margin-left: 20rpx;
			}
		}

		.body {

			.none {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 40rpx;

				image {
					width: 360rpx;
					height: 300rpx;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 32rpx;
					color: #999;
				}
			}

			.body_car {
				background-color: #fff;
				margin-top: 20rpx;
				height: 228rpx;
				display: flex;
				padding: 40rpx;
				flex-direction: column;

				justify-content: space-around;

				.linetxt {
					height: 68rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #000;
					line-height: 68rpx;

					&:after {
						content: "-";

					}

					&:last-child {
						&:after {
							content: "";
						}
					}
				}

				text {
					height: 68rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #000;
					line-height: 68rpx;
				}

				.car_center {
					height: 68rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.car_btn {

					display: flex;
					align-items: center;
					justify-content: space-between;

					.btnin {
						width: 134rpx;
						height: 68rpx;

						button {
							width: 134rpx;
							height: 68rpx;
							border-radius: 8rpx;
							background: #1890FF;
							color: #fff;
							line-height: 68rpx;
						}
					}
				}
			}
		}
	}
</style>